<template>
  <div class="PlanManagement">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyPlan' }">应急预案</el-breadcrumb-item>
        <el-breadcrumb-item>知识库</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" @node-click="deptChoose"
        :labelWidth="'150px'">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick"
        :autoHeight="table.autoHeight" />
    </div>

    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close" ref="yanpan_dialog">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <el-form slot="slot1" ref="formComponent" :model="add_form" label-width="150px" size="small" :rules="add_rules">
          <el-form-item label="文件名称：" prop="name">
            <el-input v-model="add_form.name"></el-input>
          </el-form-item>
          <el-form-item label="文件号：" prop="fileNum">
            <el-input v-model="add_form.fileNum"></el-input>
          </el-form-item>
          <el-form-item label="">
            <p style="font-size: 20px; font-weight: 700;">找到相似文档</p>
            <el-row :gutter="20" class="doc-box" style="margin-left: 0;margin-right: 0;height:281px;overflow:auto;">
              <el-col :span="6" v-for="(item, i) in filterDocs" :key="i">
                <div class="doc-item" @click="selectDoc(item, i)" :class="active_doc === item.id ? 'active-doc' : ''">
                  <el-checkbox v-model="item.checked" class="checkbox"></el-checkbox>
                  <img :src="item.img" alt="" class="doc-img">
                  <el-descriptions :column="1" labelClassName="doc-label">
                    <el-descriptions-item label="名称">
                      <span style="color:#3561fd;cursor:pointer;text-decoration: underline;"
                        @click="toKnowledgeDetail(item.id)">{{ item.name }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="修订时间">{{ item.time }}</el-descriptions-item>
                    <el-descriptions-item label="浏览次数">{{ item.num }}</el-descriptions-item>
                    <el-descriptions-item label="上传单位">{{ item.unit }}</el-descriptions-item>
                  </el-descriptions>
                  <div class="mask"></div>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="封面：" prop="cover">
            <div class="fm-box">
              <img :src="add_form.coverImg" alt="" class="fm-img" v-if="add_form.coverImg">
              <div class="fm-main">
                <span style="line-height: 18px; padding-bottom: 20px;">
                  支持jpg、png大小不超过3M，建议尺寸350*600
                </span>
                <div class="upload-btn">
                  <input type="file" id="fm-btn" title="" accept="image/png, image/jpeg">
                  <el-button plain>上传</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input type="textarea" placeholder="请输入内容" v-model="add_form.description" resize="none" autosize>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发布(修订)时间：" prop="releaseTime">
                <el-date-picker v-model="add_form.releaseTime" type="month" placeholder="选择月">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类别：" prop="category">
                <TreeSelect ref="type_tree" v-model="add_form.category" title="类别" :tree="zhishiku_type_tree">
                </TreeSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文件等级：" prop="level">
                <el-select v-model="add_form.level" placeholder="请选择" :popper-append-to-body="false"
                  popper-class="fileLevel">
                  <el-option v-for="item in grade_options" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <!-- :http-request="upload_form.httpRequest" -->
              <el-form-item label="附件：" prop="fujian">
                <el-upload class="upload" action="" :on-preview="handlePreview" :before-upload="handleBeforeUpload"
                  :on-remove="handleRemove" :limit="1" :file-list="upload_form.fileList" ref="upload"
                  accept="application/pdf,application/msword">
                  <el-button size="mini" plain style="color: #3270ff">上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持pdf/doc等文件，且不超过50mb
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <DialogForm ref="formComponent2" slot="slot2" :formConfig="formConfig3" />
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import { getListApi, onExportApi, saveApi, delApi, editApi, getByIdApi, getStatisticsApi } from "@/api/EmengercyPlan/zsk";
import { formData, zhishiku_type_tree } from "./config";
import TreeSelect from "../components/TreeSelect";
import { UploadFile, loadFile } from "@/api/common.js";
import common from "@/utils/common.js";
import { showTime } from "@/lib";
export default {
  name: "KnowledgeBase",
  components: { TreeSelect },
  data() {
    const validateFileUrl = (rule, value, callback) => {
      if (this.upload_form.fileList.length < 1) {
        callback(new Error("请上传文件"));
      } else {
        callback();
      }
    };
    return {
      fileIdInfolist: [],
      type: 0, // 区分编辑和新增,0新增，1编辑
      form: {
        name: "",
        fileNum: "",
        category: "",
        level: "",
        createTime: "",
        creator: "",
        releaseTime: ""
      },
      formData,
      // 表格信息
      table: {
        // autoHeight: true,
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "知识库列表",
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "name",
            label: "文件名称",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.toKnowledgeDetail(row.id);
                          }
                        }
                      }}
                    >
                      {row.name}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "fileNum",
            label: "文件号",
            "min-width": "160px",
            "show-overflow-tooltip": true,
            align: "left"
          },
          {
            prop: "category",
            label: "类别",
            align: "center"
          },
          {
            prop: "createTime",
            label: "创建时间",
            align: "center"
          },
          {
            prop: "creator",
            label: "创建人",
            align: "center"
            // render: (h, { row }) => {
            //   return (
            //     <div>
            //       {
            //         <span>
            //           {row.effectStartTime}至{row.effectEndTime}
            //         </span>
            //       }
            //     </div>
            //   )
            // }
          },
          {
            prop: "releaseTime",
            label: "发布(修订)时间",
            align: "center"
          },
          {
            prop: "level",
            label: "文件等级",
            align: "center"
          },
          {
            prop: "views",
            label: "浏览量",
            align: "center"
          },
          // {
          //   prop: "judgeState",
          //   label: "状态",
          //   align: "center",
          //   "min-width": "100px",
          //   formatter: (row, column, cellValue, index) => {
          //     if (cellValue === "0") {
          //       return "编辑中";
          //     } else if (cellValue === "1") {
          //       return "待审批";
          //     } else if (cellValue === "2") {
          //       return "已审批";
          //     } else if (cellValue === "3") {
          //       return "驳回";
          //     }
          //   }
          // },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "100px",
            render: (h, scope) => {
              let arr = ["预览"];
              // const tbPower = this.common.isHasPower("tbr");
              if (["system"].includes(JSON.parse(sessionStorage.getItem("role")).roleCode)) {
                arr = ["预览", "编辑", "删除"];
              }
              return (
                <div>
                  {
                    arr.map(item => {

                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "知识库录入",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          // {
          //   name: "提交",
          //   id: "submitBtn", // 事件名
          //   type: "primary",
          //   size: "small"
          // },
          {
            name: "发布",
            id: "saveBtn", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "cancelBtn",
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "创建信息",
          name: "2",
          slot: "slot2"
        }
      ],
      activeNames: ["1", "2"], // 折叠面板默认展开列
      formConfig3: {
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            isDisabled: true,
            // class: "third",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            // class: "third",
            isDisabled: true,
            prop: "createDeptName",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "填报时间",
            class: "third",
            isDisabled: true,
            prop: "createTime",
            lableWidth: "120px"
          }
        ]
      },
      fid: "",
      add_form: {
        cover: "",
        coverImg: "",
        name: "",
        fileNum: "",
        description: "",
        releaseTime: "",
        category: "",
        level: ""

      },
      checked: true,
      docs: [
        {
          id: 1,
          img: require("../../../assets/img/pd1.png"),
          name: "中华人民共和国道路交通安全法",
          time: "2022-12-14",
          num: 41,
          unit: "国网湖北省电力有限公司",
          checked: false
        },
        {
          id: 2,
          img: require("../../../assets/img/pd1.png"),
          name: "中华人民共和国职业病防治法",
          time: "2022-12-14",
          num: 42,
          unit: "国网湖北省电力有限公司",
          checked: false
        },
        {
          id: 3,
          img: require("../../../assets/img/pd1.png"),
          name: "中华人民共和国公路法",
          time: "2022-12-14",
          num: 43,
          unit: "国网湖北省电力有限公司",
          checked: false
        }, {
          id: 4,
          img: require("../../../assets/img/pd1.png"),
          name: "中华人民共和国劳动法",
          time: "2022-12-14",
          num: 44,
          unit: "国网湖北省电力有限公司",
          checked: false
        }
      ],
      active_doc: "",
      zhishiku_type_tree,
      add_rules: {
        category: [
          { required: true, message: "请选择类别", trigger: "change" }
        ],
        level: [
          { required: true, message: "请选择等级", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入文件名称", trigger: "blur" }
        ],
        releaseTime: [
          { required: true, message: "请选择发布修订时间", trigger: "change" }
        ],
        fujian: [
          { required: true, validator: validateFileUrl, trigger: "change" }
        ]
      },

      grade_options: [
        {
          label: "重要",
          value: 1
        },
        {
          label: "一般",
          value: 2
        }
      ],
      upload_form: {
        // httpRequest: () => { },
        fileList: []
      },
      ids: [],
      allIds: []
    };
  },
  mounted() {
    this.list();
  },
  watch: {
    "upload_form.fileList": {
      handler(val) {
        this.$refs["formComponent"].validateField("fujian");
      }
    }
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        // creatorDeptId: (org && JSON.parse(org).id) || "",
        unitName: (org && JSON.parse(org).unitName) || ""
      };
      return creator;
    },
    filterDocs() {
      return this.add_form.name ? this.docs.filter(i => {
        return i.name.indexOf(this.add_form.name) !== -1;
      }) : [];
    }
  },
  methods: {
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row.id);
      } else if (item === "删除") {
        this.onDelPlan(scope.row.id);
      } else if (item === "预览") {
        this.preview(scope.row.id);
      }
    },
    // 树状选择
    deptChoose(val, item) {
      this.$set(this.form, "category", val[0].label);
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.form.judgeState = this.status;
      this.list();
    },
    // 检索
    async query() {
      this.list();
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.form.name,
        fileNum: this.form.fileNum,
        category: this.form.category,
        level: this.form.level,
        creator: this.form.creator,
        releaseStartTime: this.form.releaseStartTime ? this.form.releaseStartTime[0] : "", // 发布修订开始时间
        releaseEndTime: this.form.releaseStartTime ? this.form.releaseStartTime[1] : "", // 发布修订结束时间
        createStartTime: this.form.createStartTime ? this.form.createStartTime[0] : "", // 创建开始时间
        createEndTime: this.form.createStartTime ? this.form.createStartTime[1] : "", // 创建结束时间
        deleteStatus: 0
      };
      const res = await getListApi(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
      const id = res.data.map((item) => {
        return item.id;
      });
      this.allIds = id;
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const id = this.multipleSelection.map((item) => {
        return item.id;
      });
      this.ids = id;
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法

      // 获取应急事件下拉数据
      // this.getEmergencyEventsOptions();
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    // 新增
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.type = 0;
      this.fmUpload();
      this.$nextTick(() => {
        console.log("formComponent2", this.$refs.formComponent2.form);
        this.$set(this.$refs.formComponent2.form, "creator", this.getCreator.name);
        this.$set(this.$refs.formComponent2.form, "createDeptName", sessionStorage.getItem("dwbmName"));
        this.$set(this.$refs.formComponent2.form, "createTime", showTime(new Date()));
      });
    },
    selectDoc(item, index) {
      this.active_doc = item.id;
      this.filterDocs.forEach((item, i) => {
        item.checked = i == index;
      });
      this.add_form.name = item.name;
      // this.add_form.fileNum = item.num;
    },
    // 封面上传
    fmUpload() {
      this.$nextTick(() => {
        const input = document.querySelector("#fm-btn");
        input.addEventListener("change", (e) => {
          const file = e.target.files[0];
          const { size } = file;
          const max = 3;
          const max_size = 1024 * 1024 * max;
          if (size > max_size) {
            this.$message.error(`图片大小不能超过${max}M`);
            input.value = "";
            return;
          }
          this.upload(file).then(data => {
            this.add_form.cover = data.id;
            loadFile({ id: data.id }).then(res => {
              this.add_form.coverImg = URL.createObjectURL(res);
            });
            e.target.value = "";
          });
        });
      });
    },
    // 导出操作
    onExport() {
      this.form.ids = this.ids.length ? this.ids : this.allIds;
      console.log("this.form", this.form);
      onExportApi(this.form).then(res => {
        common.downloadByBlob(res, `知识库列表${new Date().getTime()}.xlsx`);
      });
    },
    // 跳转知识库文件详情
    toKnowledgeDetail(id) {
      sessionStorage.setItem("id", JSON.stringify(id));
      this.$router.push({
        name: "KnowledgeBaseDetail"
        // query: {
        //   id
        // }
      });
    },
    // 预览知识库文件
    async preview(id) {
      console.log(id);
      const res = await getByIdApi({ id });

      console.log(res, "res");
      if (res.fileIdInfo && res.fileIdInfo.length == 0) return;
      const { attachId, attachName } = res.fileIdInfo[0];
      this.common.pdfPreview(attachId, attachName);
      // 预览次数统计  0预览 1下载
      await getStatisticsApi({ id, type: 0 });
    },
    // 弹窗关闭图标
    close() {
      this.dialogConfig.isShow = false;
      this.cancelBtn();
    },
    // 编辑知识库文件
    HanEdit(id) {
      this.dialogConfig.isShow = true;
      console.log("row.id", id);
      this.fmUpload();
      getByIdApi({ id }).then(res => {
        this.type = 1;
        this.fid = res.id;
        console.log(res);
        loadFile({ id: res.cover }).then(data => {
          this.add_form.coverImg = URL.createObjectURL(data);
        });
        this.$set(this.add_form, "name", res.name);
        this.$set(this.add_form, "fileNum", res.fileNum);
        // this.$set(this.add_form, "cover", res.cover);
        this.$set(this.add_form, "description", res.description);
        this.$set(this.add_form, "releaseTime", res.releaseTime);
        this.$set(this.add_form, "category", res.category);
        this.$set(this.add_form, "level", res.level);
        this.$set(this.$refs.formComponent2.form, "creator", res.creator);
        this.$set(this.$refs.formComponent2.form, "createDeptName", res.createDeptName);
        this.$set(this.$refs.formComponent2.form, "createTime", res.createTime);
        this.fileIdInfolist = res.fileIdInfo;
        const newList = [];
        this.fileIdInfolist.forEach(item => {
          newList.push({
            name: item.attachName,
            attachId: item.attachId
          });
        });
        console.log("newList", newList);
        this.$set(this.upload_form, "fileList", newList);
      });

    },
    // 删除知识库文件
    onDelPlan(id) {
      console.log("row.id", id);
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delApi({ id }).then(res => {
          this.$message({
            type: "success",
            message: `删除成功`
          });
          this.list();
        });
      });
    },
    // 提交数据处理
    handleData() {
      this.$refs["formComponent"].validate((valid) => {
        this.flag = valid;
      });
      const flag = this.flag;
      const deleteStatus = { deleteStatus: 0 };
      const list = this.upload_form.fileList;
      const newList = [];
      list.forEach(item => {
        newList.push(
          {
            attachName: item.name,
            attachId: item.attachId
          }
        );
      });
      const fileIdInfo = { fileIdInfo: newList };
      const parmas = Object.assign({}, this.add_form, this.$refs.formComponent2.form, deleteStatus, fileIdInfo);
      console.log("parmas", parmas);
      return {
        isValidate: flag,
        parmas
      };
    },
    submitBtn() {
      this.saveBtn();
    },
    async saveBtn() {
      const { isValidate, parmas } = this.handleData();
      if (isValidate) {
        try {
          let message = "";
          if (this.type == 0) {
            await saveApi(parmas);
            message = "提交成功";
          } else {
            parmas.id = this.fid;
            await editApi(parmas);
            message = "编辑成功";
          }
          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.cancelBtn();
        } catch (error) {
          console.error(error);
        }
      }
    },
    // 取消
    cancelBtn() {
      this.filterDocs.forEach(element => { element.checked = false; });
      this.active_doc = "";
      this.$refs["formComponent"].resetFields();
      this.upload_form.fileList = [];
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$nextTick(() => {
        console.log("this", this.$refs);
        this.$refs.formComponent.clearValidate();
        //   this.$refs.formComponent2.$refs.formInlines.clearValidate();

        this.dialogConfig.isShow = false;
      });
    },
    upload(file) {
      return new Promise((resolve, reject) => {
        const params = {
          file: file,
          directoryId: 2,
          isNew: false,
          moduleName: "emergency"
        };
        UploadFile(this.common.convertFormData(params)).then(data => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },
    // 上传附件
    handleBeforeUpload(file) {
      // this.$message({
      //   message: "功能开发中",
      //   type: "success"
      // });
      this.upload(file).then(data => {
        this.upload_form.fileList.push({ name: data.fileName, url: data.id, attachName: data.fileName, attachId: data.id });
      });
    },
    // 下载
    handlePreview(file) {
      console.log(file, "file");
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)"
      });
      loadFile({ id: file.attachId }).then(res => {
        const a = document.createElement("a");
        const objectUrl = URL.createObjectURL(res);
        a.setAttribute("href", objectUrl);
        a.setAttribute("download", file.name);
        a.click();
        loading.close();
      }).catch(() => {
        loading.close();
      });
    },
    // 移除附件
    handleRemove(file, fileList) {
      const result = this.upload_form.fileList;
      console.log("this.upload_form.fileList", this.upload_form.fileList);
      result.forEach((item, index) => {
        if (item.attachId === file.attachId) {
          this.upload_form.fileList = this.upload_form.fileList.splice(index, 0);
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

.upload {
  :deep(.el-button) {
    padding: 9px 40px;
    font-size: 16px;
    text-decoration: underline;
    cursor: default;
  }

  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}

:deep(.EmergencyList-dialog-form-item) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

.doc-box {
  border: 1px solid #d9d9d9;
  padding: 20px 0 10px 0;
  // max-height: 570px;
  // overflow-y: auto;

  .doc-item {
    position: relative;
    padding: 10px 5px 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30%;
      z-index: 1;
    }

    .checkbox {
      position: absolute;
      right: 10px;
      top: 5px;
      zoom: 200%;
    }

    :deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
      padding-bottom: 4px;
    }

    :deep(.el-descriptions__body) {
      background-color: transparent;
    }

    .doc-img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      margin-bottom: 5px;
    }

    :deep(.doc-label) {
      width: 60px;
      justify-content: flex-end;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__inner) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #fff;
    }
  }

  .active-doc {
    background-color: #fff;
    border-color: #3270ff;
  }
}

.fm-box {
  display: flex;

  .fm-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .fm-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 160px;
    color: #606266;

    .upload-btn {
      position: relative;
      width: 114px;
      cursor: pointer;

      &:hover {
        :deep(.el-button) {
          border-color: #409eff;
        }
      }

      #fm-btn {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 114px;
        height: 36px;
        z-index: 1;
      }

      :deep(.el-button) {
        padding: 9px 40px;
        font-size: 16px;

        span {
          text-decoration: underline;
          color: #3270ff;
        }
      }
    }
  }
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 26px;
  position: relative;
  top: 8px;
}

/deep/.el-button--small {
  font-size: 16px;
}

/deep/.el-button--mini {
  font-size: 16px;
}

/deep/.fileLevel .el-select-dropdown__item {
  padding-left: 20px;
}
</style>
